<template>
    <div id="login">

        <mt-header fixed title="登陆">
            <span @click="() =>{ $router.replace('/home')}" slot="left">
                <mt-button icon="back">首页</mt-button>
            </span>
        </mt-header>

        <div class="login-content" v-getH>
            <div>
                <div class="login-header-img">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-yonghuming"></use>
                    </svg>
                </div>

                <div class="login-hasCount">
                    <span :class="{active: !hasCount}" @click="() =>{hasCount = false}">有账号</span>
                    <span :class="{active: hasCount}" @click="() =>{hasCount = true}">无账号</span>
                </div>

                <mt-field label="用户名" placeholder="请输入用户名" v-model="uname1"></mt-field>
                <mt-field label="密码" placeholder="请输入密码" type="password" v-model="paw1"></mt-field>
                <mt-field v-show="hasCount" label="邮箱" placeholder="请输入邮箱" type="email" v-model="email1"></mt-field>
                <mt-radio
                    v-model="type1"
                    :options="['普通用户', '商家']"
                    v-show="hasCount">
                </mt-radio>
                <div v-show="hasCount" class="select-img">
                    <mt-button type="danger" size="large">
                        选择头像
                    </mt-button>
                    <input type="file" @change="getImg">
                </div>

                <div class="login-to-home">
                    <mt-button type="primary"  @click="()=>{
                        if(hasCount) return noCount()
                        loginCount()
                        }" size="large">登陆</mt-button>                    
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import { mapState, mapMutations, mapActions } from 'vuex'
import { MessageBox  } from 'mint-ui';
import axios from 'axios'
export default {
    data(){
        return {
            uname1: '',
            paw1: '',
            email1:'',
            type1:'普通用户',
            hasCount: false
        }
    },

    inject: ['reload'],
    computed:{
       ...mapState([
           'type',
           'showShop',
           'uname',
           'paw',
           'email',
           'type',
           'hImg',
           'sname',
           'isLogin'
       ])
    },
    created(){
        //在这里保存一份 初始化的state  但是只有是不登陆的时候才保存
        if(!this.isLogin){
            sessionStorage.setItem('stateInit', JSON.stringify(this.$store.state))
        }
    },
    methods: {
      ...mapMutations([
          'setState',
          'setToast'
      ]),
      ...mapActions([
          'saveState',
          'getState',
          'getHome',
          'registerCount',
          'login'
      ]),

      //注册登陆一起
      noCount(){
          
          const {uname1,paw1,email1,type1,hImg} = this
          const regEmail = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$")
          if(!uname1){
              return this.setToast('用户名为空')
          }else if(!paw1){
              return this.setToast('密码为空')
          }else if(!email1){
              return this.setToast('邮箱为空')
          }else if(!regEmail.test(email1)){
            return this.setToast('邮箱格式错误')
          }else if(!hImg){
              return this.setToast('请选择头像')
          }
         
          this.registerCount({
              uname: uname1,
              paw: paw1,
              email: email1,
              type: type1,
              hImg,
          }).then((storeFlag) =>{
                this.setState({
                    uname: uname1,
                    paw: paw1,
                    email: email1,
                    type: type1,
                    storeFlag
                })

                this.$router.replace('/home')
          }, () =>{
              MessageBox('提示', '用户名已经存在');
          })
    
      },
      //有账号
      loginCount(){
          const {uname1,paw1} = this
          if(!uname1){
              return this.setToast('用户名为空')
          }else if(!paw1){
              return this.setToast('密码为空')
          }

          //这里是判断用户名是否存在
          this.login({
              uname: uname1,
              paw:paw1
          }).then((storeFlag) =>{
              //此时需要获取 state的状态值 获取失败的话 就登陆失败
              this.getState({
                  storeFlag
              }).then(() =>{
                  //前往首页
                  this.$router.replace('/home')
                  this.reload()
              })
          }, msg =>{
              //用户名不存在 密码错误
              MessageBox.alert(msg)
          })
      },

      //获取头像
      getImg(ev){
        const files = ev.target.files

        const reader = new FileReader()
        
        reader.readAsDataURL(files[0])

        reader.addEventListener("load", (ev) => {
            this.setState({hImg: ev.target.result})
        }, false);
      }
    },

    //指令
    directives:{
        //商品滚动的最大高度
        getH:{
             inserted: function (el) {
                //  这里即为 减去 点餐区域的margin-top值 还有下面的购物车区域的高度
               el.style.height = (document.querySelector('html').clientHeight - 40) + 'px'
            }
        }
    }

}
</script>

<style lang="less" scoped>

#login{
    height: 100%;
    overflow: hidden;
    .login-content{
        margin-top: 50px; 
        padding-bottom: 10px;
        overflow-y: auto;
        label{
            color: #49CB5F;
        }
        .login-header-img{
            height: 120px;
            padding: 10px 0;
            text-align: center;
            > svg{
                width: 50%;
                max-height: 120px;
                border-radius: 50%;
            }
        }
        .login-hasCount{
            margin: 5px 0;
            text-align: center;
            >span{
                font-size: 20px;
                padding: 5px 10px;
            }
        }
        .select-img{
            position: relative;
            margin: 5px 0;
            > input{
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0;
                width: 100%;
                height: 100%;
            }
        }
    }
}

.active{
    color: #49CB5F;
}
</style>


